<template>
  <div class="content">
    <el-form inline>
      <el-form-item label="参考系类型">
        <el-select v-model="referenceType" size="mini">
          <el-option label="WGS84" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          size="mini"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          size="mini"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- <p class="data" v-show="show">暂无数据</p> -->

    <div id="ComparisonAutomation" style="height: 73vh"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "ComparisonAutomation",
  data() {
    return {
      referenceType: "WGS84",
      show: true,
      //   form: {
      //     // timeType: "1h",
      //     startTime: this.$store.state.runData,
      //     endTime: this.$store.state.endtTime,
      //   },
    };
  },
  methods: {
    drawLine() {
      var myChart = echarts.init(
        document.getElementById("ComparisonAutomation")
      );
      let option = {
        title: {
          left: "center",
          text: "BW1-1"+"人工与在线监测对比分析图",
        },
        tooltip: {
          trigger: "axis",
        },
        color: ["#33a3dc", "#11264f", "#464547"],
        legend: {
          itemHeight: 2,
          data: [
            {
              name: "BW1-1-∆X",
              icon: "line",
            },
            {
              name: "BW1-1-∆Y",
              icon: "line",
            },
            {
              name: "BW1-1-∆H",
              icon: "line",
            },
            {
              name: "人工-∆X",
              icon: "image://" + require("../../../../assets/xuxian/1.png"),
            },
            {
              name: "人工-∆Y",
              icon: "image://" + require("../../../../assets/xuxian/2.png"),
            },
            {
              name: "人工-∆H",
              icon: "image://" + require("../../../../assets/xuxian/3.png"),
            },
          ],
          bottom: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          // right: "3.7%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2020-08-18",
            "2020-08-19",
            "2020-08-20",
            "2020-08-21",
            "2020-08-22",
            "2020-08-23",
            "2020-08-24",
            "2020-08-25",
            "2020-08-26",
            "2020-08-27",
            "2020-08-28",
            "2020-08-29",
            "2020-08-30",
            "2020-08-31",
            "2020-09-01",
            "2020-09-02",
            "2020-09-03",
            "2020-09-04",
            "2020-09-05",
          ],
        },
        yAxis: {
          name: "位移(mm)",
          type: "value",
        },
        series: [
          {
            name: "人工-∆X",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "violet",
              type: "dotted",
            },
            data: [
              0,
              -1.5,
              0.1,
              -1.6,
              0.8,
              -1.2,
              1.25,
              -2.99,
              -0.1,
              -1.05,
              1.4,
              0.75,
              1.85,
              -0.4,
              0.35,
              0.3,
              0.8,
              -0.3,
              0.7,
            ],
            smooth: true,
          },
          {
            name: "人工-∆Y",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "green",
              type: "dotted",
            },
            data: [
              0,
              -1.5,
              0.1,
              -1.6,
              0.8,
              -1.2,
              1.25,
              -2.99,
              -0.1,
              -1.05,
              1.2,
              0.75,
              1.85,
              -0.4,
              0.35,
              0.3,
              0.8,
              -0.3,
              0.7,
            ],
            smooth: true,
          },
          {
            name: "人工-∆H",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "green",
              type: "dashed",
            },
            data: [
              0,
              -1.5,
              0.1,
              -1.6,
              0.8,
              -1.2,
              1.25,
              -2.99,
              -0.1,
              -1.05,
              1.2,
              0.75,
              1.85,
              -0.4,
              0.35,
              0.3,
              0.8,
              -0.3,
              0.7,
            ],
            smooth: true,
          },
          {
            name: "BW1-1-∆X",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "green",
              type: "solid",
            },
            data: [
              -0.97,
              -1.12,
              -0.8,
              -1.03,
              0.15,
              -0.3,
              -0.35,
              0.5,
              -0.3,
              -0.3,
              0.4,
              -1.2,
              0,
              -1.6,
              1.15,
              -1.23,
              -1.15,
              -1.28,
              -1,
            ],
            smooth: true,
          },
          {
            name: "BW1-1-∆Y",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "green",
              type: "solid",
            },
            data: [
              -0.97,
              -1.12,
              -0.8,
              -1.03,
              0.15,
              -0.3,
              -0.35,
              0.5,
              -0.3,
              -0.3,
              0.4,
              -1.2,
              0,
              -1.6,
              1.15,
              -1.23,
              -1.15,
              -1.28,
              -1,
            ],
            smooth: true,
          },
          {
            name: "BW1-1-∆H",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "green",
              type: "solid",
            },
            data: [
              -0.97,
              -1.12,
              -0.8,
              -1.03,
              0.15,
              -0.3,
              -0.35,
              0.5,
              -0.3,
              -0.3,
              0.4,
              -1.2,
              0,
              -1.6,
              1.15,
              -1.23,
              -1.15,
              -1.28,
              -1,
            ],
            smooth: true,
          },
        ],
        grid: {
          y2: 100,
        },
      };
      myChart.on("legendselectchanged", function (params) {
        var selected=params.selected;
        if ((selected['人工-∆X'])) {
          option.legend.data[3].icon =
            "image://" + require("../../../../assets/xuxian/1.png");
        } else {
          option.legend.data[3].icon =
            "image://" + require("../../../../assets/xuxian/5.png");
        }
        if ((selected['人工-∆Y'])) {
          option.legend.data[4].icon =
            "image://" + require("../../../../assets/xuxian/2.png");
        } else {
          option.legend.data[4].icon =
            "image://" + require("../../../../assets/xuxian/6.png");
        }
        if ((selected['人工-∆H'])) {
          option.legend.data[5].icon =
            "image://" + require("../../../../assets/xuxian/3.png");
        } else {
          option.legend.data[5].icon =
            "image://" + require("../../../../assets/xuxian/7.png");
        }
        myChart.setOption(option);
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>

<style scoped>
.content {
  height: 83vh;
}
.data {
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
}
</style>
